<template>
    <Form v-bind="defaultFormProps" size="large" autocomplete="on" ref="formRef" :model="formState" :rules="rules" @finish="handleFinish()">
        <h3 class="text-2xl font-bold text-center text-primary mb-[6px]">创建企业</h3>
        <p class="text-sm text-third text-center mb-8">欢迎使用智聘，创建企业开始招聘吧！</p>
        <FormItem label="姓名" name="name">
            <a-input v-model:value="formState.name" placeholder="请输入你的姓名" class="!text-sm text-primary" />
        </FormItem>
        <FormItem label="企业" name="company">
            <a-input v-model:value="formState.company" placeholder="请输入企业名称" class="!text-sm text-primary" />
        </FormItem>
        <FormItem label="规模" name="scale">
            <a-select v-model:value="formState.scale" placeholder="请选择企业规模" class="select-control" :options="scaleOptions" />
        </FormItem>
        <FormItem label="职位" name="position">
            <a-input v-model:value="formState.position" placeholder="请输入你在当前企业的职务" class="!text-sm text-primary" />
        </FormItem>
        <FormItem class="!mt-[40px]">
            <a-button type="primary" html-type="submit" block shape="round" :loading="formLoading">确认</a-button>
        </FormItem>
        <p class="text-center text-secondary text-sm mt-6 touchable-opacity" @click="$emit('switch')">加入已有企业 >></p>
    </Form>
</template>
<script lang="ts" setup>
import { Form, FormItem } from 'ant-design-vue'
import { defaultFormProps } from '@/constants/comp-setting'
type FormState = {
    name?: string
    company?: string
    scale?: string
    position?: string
};
defineOptions({
    name: 'GpCreateCompanyForm',
    inheritAttrs: true
})
const emit = defineEmits<{
    success: []
    switch: []
}>()
const { action } = defineProps<{
    action(formState: FormState): IAwaitable<any>
}>()
const scaleOptions: IOption<string>[] = [
    { value: "微型企业（少于20人）", label: "微型企业（少于20人）" },
    { value: "小型企业（20-99人）", label: '小型企业（20-99人）' },
    { value: "中型企业（100-999人）", label: '中型企业（100-999人）' },
    { value: "大型企业（超过1000人）", label: '大型企业（超过1000人）' },
]
const {
    formRef,
    formState,
    formLoading,
    rules,
    handleFormFinish
} = useFormState<FormState>({
    getInitialState() {
        return {}
    },
    rules: {
        name: { required: true },
        company: { required: true },
        scale: { required: true },
        position: { required: true },
    }
})
function handleFinish() {
    handleFormFinish(action).then(() => {
        emit("success")
    })
}
</script>
<style lang="less" scoped>
.select-control {
    :deep(.ant-select-selection-search),
    :deep(.ant-select-selection-placeholder) {
        font-size: 14px;
    }
    :deep(.ant-select-selection-search) {
        color: var(--color-primary);
    }
}
</style>